<template>
  <div class="news-page">
    <!-- 顶部横幅 -->
    <div class="banner">
      <div class="banner-content">
        <h1>新闻动态</h1>
        <p>了解最新海洋环保资讯</p>
      </div>
    </div>

    <div class="news-container">
      <!-- 主要新闻列表 -->
      <div class="main-news">
        <div class="news-list">
          <div v-for="news in mainNews" :key="news.id" class="news-item" @click="viewNewsDetail(news.id)">
            <div class="news-image">
              <el-image 
                :src="news.image" 
                fit="cover"
                loading="lazy"
              >
                <template #placeholder>
                  <div class="image-placeholder">
                    <el-icon><Picture /></el-icon>
                  </div>
                </template>
                <template #error>
                  <div class="image-error">
                    <el-icon><PictureRound /></el-icon>
                  </div>
                </template>
              </el-image>
            </div>
            <div class="news-content">
              <h3 class="news-title">{{ news.title }}</h3>
              <p class="news-summary">{{ news.summary }}</p>
              <div class="news-meta">
                <span class="news-date">
                  <el-icon><Calendar /></el-icon>
                  {{ news.date }}
                </span>
                <span class="news-views">
                  <el-icon><View /></el-icon>
                  {{ news.views }}
                </span>
              </div>
            </div>
          </div>
          
          <!-- 分页器 -->
          <div class="pagination">
            <el-pagination
              v-model:current-page="currentPage"
              :page-size="10"
              :total="100"
              background
              layout="prev, pager, next"
            />
          </div>
        </div>
      </div>

      <!-- 右侧边栏 -->
      <div class="news-sidebar">
        <!-- 热点新闻 -->
        <div class="hot-news sidebar-card">
          <h2 class="sidebar-title">热点新闻</h2>
          <ul class="hot-news-list">
            <li v-for="news in hotNews" :key="news.id" @click="viewNewsDetail(news.id)">
              <span class="hot-rank" :class="{ 'top-rank': news.rank <= 3 }">{{ news.rank }}</span>
              <span class="hot-title">{{ news.title }}</span>
            </li>
          </ul>
        </div>

        <!-- 图片新闻 -->
        <div class="photo-news sidebar-card">
          <h2 class="sidebar-title">图片新闻</h2>
          <el-carousel height="200px" indicator-position="outside">
            <el-carousel-item v-for="photo in photoNews" :key="photo.id">
              <div class="photo-item" @click="viewNewsDetail(photo.id)">
                <el-image 
                  :src="photo.image" 
                  fit="cover"
                  loading="lazy"
                >
                  <template #placeholder>
                    <div class="image-placeholder">
                      <el-icon><Picture /></el-icon>
                    </div>
                  </template>
                  <template #error>
                    <div class="image-error">
                      <el-icon><PictureRound /></el-icon>
                    </div>
                  </template>
                </el-image>
                <div class="photo-title">{{ photo.title }}</div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Calendar, View, Picture, PictureRounded } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const currentPage = ref(1)

// Mock数据：主要新闻列表
const mainNews = ref([
  {
    id: 1,
    title: '全国海洋生态保护工作会议在北京召开',
    summary: '会议强调要加强海洋生态系统保护，推进海洋污染防治，促进海洋经济可持续发展。',
    image: 'https://images.unsplash.com/photo-1573167243872-43c6433b9d40?w=800',
    date: '2024-03-15',
    views: 2451
  },
  {
    id: 2,
    title: '我国首个深海生态保护区正式设立',
    summary: '该保护区位于南海深海区域，总面积约5000平方公里，将为深海生态系统保护提供重要保障。',
    image: 'https://images.unsplash.com/photo-1682687220742-aba13b6e50ba?w=800',
    date: '2024-03-14',
    views: 1832
  },
  {
    id: 3,
    title: '2024年海洋生态修复项目启动',
    summary: '计划投入50亿元用于红树林恢复、珊瑚礁保护等海洋生态修复工作。',
    image: 'https://images.unsplash.com/photo-1546026423-cc4642628d2b?w=800',
    date: '2024-03-13',
    views: 1654
  },
  {
    id: 4,
    title: '海洋塑料污染防治取得新进展',
    summary: '去年我国近海塑料污染物较前年减少15%，多项治理措施显现成效。',
    image: 'https://images.unsplash.com/photo-1621451537084-482c73073a0f?w=800',
    date: '2024-03-12',
    views: 1245
  },
  {
    id: 5,
    title: '沿海城市联合开展海洋环保行动',
    summary: '十个沿海城市签署海洋环保合作协议，共同推进海洋生态保护。',
    image: 'https://images.unsplash.com/photo-1559494007-9f5847c49d94?w=800',
    date: '2024-03-11',
    views: 986
  }
])

// Mock数据：热点新闻
const hotNews = ref([
  {
    id: 6,
    title: '重大突破：我国科学家发现新型海洋微生物',
    rank: 1
  },
  {
    id: 7,
    title: '国际海洋日：全球共同行动保护海洋',
    rank: 2
  },
  {
    id: 8,
    title: '海龟保护项目成效显著，数量明显回升',
    rank: 3
  },
  {
    id: 9,
    title: '海洋生态环境监测网络建设完成',
    rank: 4
  },
  {
    id: 10,
    title: '滨海湿地修复项目获国际认可',
    rank: 5
  }
])

// Mock数据：图片新闻
const photoNews = ref([
  {
    id: 11,
    title: '珊瑚礁生态系统修复现场',
    image: 'https://images.unsplash.com/photo-1682687220742-aba13b6e50ba?w=800'
  },
  {
    id: 12,
    title: '志愿者海滩清洁行动',
    image: 'https://images.unsplash.com/photo-1621451537084-482c73073a0f?w=800'
  },
  {
    id: 13,
    title: '海豚救助中心正式运营',
    image: 'https://images.unsplash.com/photo-1440745419137-53528e12b1e4?w=800'
  },
  {
    id: 14,
    title: '红树林保护区生态考察',
    image: 'https://images.unsplash.com/photo-1559494007-9f5847c49d94?w=800'
  }
])

// 查看新闻详情
const viewNewsDetail = (id) => {
  router.push(`/news/${id}`)
}
</script>

<style scoped lang="scss">
.news-page {
  .banner {
    height: 200px;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), 
                url('https://images.unsplash.com/photo-1439405326854-014607f694d7?w=1200') center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
    margin-bottom: 30px;
    border-radius: 8px;


    .banner-content {
      h1 {
        font-size: 2.5em;
        margin-bottom: 15px;
      }
      p {
        font-size: 1.2em;
        opacity: 0.9;
      }
    }
  }

  .news-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    gap: 30px;
  }

  .main-news {
    flex: 1;
    
    .news-list {
      .news-item {
        display: flex;
        gap: 20px;
        padding: 20px;
        border-bottom: 1px solid #eee;
        cursor: pointer;
        transition: all 0.3s;

        &:hover {
          background: #f5f7fa;
          transform: translateY(-2px);
        }

        .news-image {
          width: 200px;
          height: 134px;
          border-radius: 8px;
          overflow: hidden;

          .el-image {
            width: 100%;
            height: 100%;
          }
        }

        .news-content {
          flex: 1;

          .news-title {
            font-size: 18px;
            color: #303133;
            margin-bottom: 12px;
            line-height: 1.4;
          }

          .news-summary {
            color: #606266;
            font-size: 14px;
            line-height: 1.6;
            margin-bottom: 12px;
          }

          .news-meta {
            display: flex;
            gap: 20px;
            color: #909399;
            font-size: 13px;

            span {
              display: flex;
              align-items: center;
              gap: 4px;
            }
          }
        }
      }
    }

    .pagination {
      margin-top: 30px;
      display: flex;
      justify-content: center;
    }
  }

  .news-sidebar {
    width: 300px;

    .sidebar-card {
      background: #fff;
      border-radius: 8px;
      padding: 20px;
      margin-bottom: 20px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

      .sidebar-title {
        font-size: 18px;
        color: #303133;
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 2px solid #409EFF;
      }
    }

    .hot-news-list {
      list-style: none;
      padding: 0;

      li {
        display: flex;
        gap: 12px;
        padding: 12px 0;
        cursor: pointer;
        transition: all 0.3s;

        &:hover {
          color: #409EFF;
        }

        .hot-rank {
          width: 24px;
          height: 24px;
          background: #f0f2f5;
          border-radius: 4px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 14px;
          color: #909399;

          &.top-rank {
            background: #409EFF;
            color: white;
          }
        }

        .hot-title {
          flex: 1;
          font-size: 14px;
          line-height: 1.4;
        }
      }
    }

    .photo-news {
      .photo-item {
        position: relative;
        height: 200px;
        cursor: pointer;

        .el-image {
          width: 100%;
          height: 100%;
        }

        .photo-title {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          padding: 10px;
          background: linear-gradient(transparent, rgba(0,0,0,0.7));
          color: white;
          font-size: 14px;
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .news-page {
    .news-container {
      flex-direction: column;
    }

    .news-sidebar {
      width: 100%;
    }

    .main-news {
      .news-item {
        flex-direction: column;

        .news-image {
          width: 100%;
          height: 200px;
        }
      }
    }
  }
}

.image-placeholder,
.image-error {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f5f7fa;
  color: #909399;

  .el-icon {
    font-size: 24px;
  }
}

.image-error {
  background: #fef0f0;
  color: #f56c6c;
}
</style> 